<template>
  <div class="device-card">
    <div class="device-card_title">
      <div class="left">
        <i class="iconfont icon-a-iconchengshizhiyan" style="margin-right: 3px;"></i>
        <i class="name">{{name}}</i>
      </div>
      <div class="right">
        <i class="close" style="cursor: pointer;" @click="closeDeviceCard">x</i>
      </div>
    </div>
    <div class="device-card_content"></div>
    <div class="device-card_footer">
      <div class="operation">
        <button @click="showDetail(name)">详情</button>
      </div>
    </div>
    <div class="triangle"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      featureclass: "",
      name: "",
      scalerank: ""
    }
  },
  mounted() {
    console.log(this.value, "value");
    this.featureclass = this.value.properties.featureclass;
    this.name = this.value.properties.name;
    this.scalerank = this.value.properties.scalerank;
  }
}
</script>
<style lang="scss" scoped>
.device-card {
  width: 300px;
  min-height: 200px;
  position: relative;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
  }
  &_footer {
    .operation {
      padding: 3px 6px;
      display: flex;
      button {
        outline: none;
        border: 1px solid green;
        border-radius: 3px;
        background-color: #aaff11;
        color: #fff;
        padding: 2px 4px;
        cursor: pointer;
      }
      button:hover {
        background-color: #fff;
        color: #aaff11;
      }
    }
  }
  .triangle {
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid #fff;
    }
}
</style>